<template>
  <el-dialog title="修改状态" :visible.sync="open" width="350px">
    <el-form ref="formData" :model="formData" size="small">
      <el-form-item label="状态">
        <el-select v-model="formData.jobStatus" placeholder="请选择状态">
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="item in statusList"
            :key="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="open = false" size="small">取 消</el-button>
      <el-button
        type="primary"
        @click="submitForm('formData')"
        size="small"
        :disabled="loading"
        :icon="loading?'el-icon-loading':'el-icon-circle-plus-outline'"
      >确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { jobStatus } from "./jobStatus";
import { change2leave } from "@/api/addressBook";
export default {
  data() {
    return {
      open: false,
      formData: {},
      loading:false,
      statusList: jobStatus(),
    };
  },
  methods: {
    show({ userId, jobStatus }) {
      this.open = true;
      this.formData = {
        userId: userId,
        jobStatus: jobStatus,
      };
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          change2leave(this.formData).then((res) => {
            this.loading = false;
            if (res.data.code === this.ERR_OK) {
              this.open = false
              this.$message.success(res.data.msg);
              this.$emit("load");
            } else {
              this.$message.error(res.data.msg);
            }
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>